<template>
  <div class="skill flex grow column">
    <yn-common-title name="技巧心得">
      <div slot="icon">
        <img
          :src="PIC_URL + '/tlbypcWeb/home/jqxd.png'"
          @error="
            $fn.imageHandler(path + '/client/home/images/jqxd.png', $event)
          "
        />
      </div>
      <template slot="right">
        <a @click="toMore">更多</a>
      </template>
    </yn-common-title>
    <div class="detail">
      <div class="items flex column">
        <div
          class="item"
          v-for="(item, i) in list"
          :key="i"
          @click="link(item.id, item.title)"
        >
          <p class="flex">
            <span class="name grow">{{ item.title }}</span>
            <span class="time">{{ item._time }}</span>
          </p>
          <div class="txt" v-html="item.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { CLIENT } from "@/common/const";
import title from "../common/title";
import { getSkills } from "../../api/index";

import dayjs from "dayjs";

export default {
  data() {
    return {
      list: [],
      path: CLIENT,
    };
  },
  mounted() {
    this.getSkills();
  },
  components: { "yn-common-title": title },

  methods: {
    link(id, title) {
      window.prompt(
        "",
        `up://["user.info",${Date.now()},{"type":"link","data":{"url":"${CLIENT}/client/toArticleDetail.htm?skillId=${id}","title":"${title}"}}]`
      );
    },
    async getSkills() {
      await getSkills({ pageSize: 15 }).then((back) => {
        if (back.status == 1) {
          let list = back.data.list;

          this.list = list.map((item) => {
            item.title = item.title.substring(0, 20);
            item._time = dayjs(item.createTime).format("MM-DD");
            return item;
          });
        }
      });
    },
    toMore() {
      if (!navigator.onLine) return Toast("网络连接失败，请检查网络设置");
      this.$router.push({ path: "/list", query: { name: "技巧心得" } });
    },
  },
};
</script>

<style scoped lang="scss">
.skill {
  background: #090910;
  border: 1px solid #25262a;
}
.detail {
  overflow: auto;
  .item {
    padding: 20px;
    cursor: pointer;
    border-bottom: 1px solid #25262a;
    &:last-child {
      border-bottom: 0;
    }
    .name {
      width: 230px;
      font-size: 20px;
      font-weight: 400;
      padding-right: 20px;
      color: #bcbfc4;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .time {
      white-space: nowrap;
      color: #bcbfc4;
      font-weight: 400;
      text-align: right;
      font-size: 18px;
    }
    .txt {
      line-height: 26px;
      max-height: 52px;
      text-align: justify;
      overflow: hidden;
      word-break: break-all;
      margin-top: 10px;
      font-size: 18px;
      color: #a9acb0;
      font-weight: 400;
    }
  }
  .item:hover {
    background: #323337;
  }
}
.banner {
  overflow: hidden;
  padding: 20px 0 16px;

  img {
    margin: auto;
    display: block;
    width: 100%;
  }
}
</style>
